<template>
<div class="home_content">
    <HomeContent></HomeContent>
  <!-- 轮播图 -->
  <div class="slideshow">
    <SlideShow></SlideShow>
  </div>

  <!-- 排行榜相关 -->
  <div class="tomatoes">
    <div class="cate_box1" @click="goRank">
      <img src="../../assets/images/tomatoes1.png" class="tomatoes_img">
      <div class="tomatoes_text">排行榜</div>
    </div>
    <div class="cate_box2" @click="goClassIfIcation">
      <img src="../../assets/images/tomatoes2.png" class="tomatoes_img">
      <div class="tomatoes_text">分类</div>
    </div>
    <div class="cate_box3" @click="goListenList">
      <img src="../../assets/images/tomatoes3.png" class="tomatoes_img">
      <div class="tomatoes_text">听单</div>
    </div>
  </div>

  <!-- 喜马拉雅横幅标语 -->
  <div class="amid_banner">
    <img src="../../assets/images/banner.png" class="banner_img" @click="goLogin($event)">
  </div>

  <!-- 新人必听 -->
  <div class="albunm_title">
    <div class="albunm_text">新人必听</div>
  </div>
    <WrapList :newPeople="newPeople"></WrapList>
  

  <!-- 限时免费 -->
  <div class="albunm_title">
    <div class="albunm_text">
      限时免费
    </div>

    <!-- 倒计时 -->
    <div class="countDown">
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </div>
  </div>
    <About :myTymz="myTymz"></About>


  <!-- 今日热点 -->
  <div class="albunm_title">
    <div class="albunm_text3">今日热点</div>
  </div>
  <HotToday :hotTrack="hotTrack"></HotToday>

  <!-- 博客推荐 -->
  <!-- <div class="albunm_title">
    <div class="albunm_text">博客推荐</div>
  </div>
  <BlogreCommenDation></BlogreCommenDation>
  <BlogreCommenDation></BlogreCommenDation>
  <BlogreCommenDation></BlogreCommenDation>
  <BlogreCommenDation></BlogreCommenDation>
  <BlogreCommenDation></BlogreCommenDation>
  <BlogreCommenDation></BlogreCommenDation>
  <BlogreCommenDation></BlogreCommenDation> -->


  <!-- 底部 -->
  <div id="bgimg" class="footer_content">
    <div class="footer_img">
      <img src="../../assets//images/footer.png" alt="">
    </div>
    <div class="footer_text">
      <!-- <p>© 2014-2023 尚硅谷 版权所有</p> -->
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import HomeContent from '../../components/HomeContent.vue'
import SlideShow from './components/SlideShow.vue'
import WrapList from './components/WrapList.vue'
import HotToday from './components/HotToday.vue'

import { reqNewPeople } from '@/apis/newpeople'
import { reqmytymz } from '@/apis/mytymz'
import { onMounted, ref } from 'vue'
import type { AnyObject } from '@/types/newpeople'
import About from './components/About.vue'
import router from '@/router'

const pageNum = ref(1)
const pageSize = ref(6)
const newPeople = ref<AnyObject[]>([])//新人必听数据
const myTymz = ref<AnyObject[]>([])//限时免费数据
const hotTrack = ref<AnyObject[]>([])

const timer = ref()
const time = ref(timer)
onMounted(()=>{
  getNewPeople()
  getMyTymz()
  getReqmyTymz()
})

const getNewPeople = async () => {
  try {
    let result = await reqNewPeople(pageNum.value,pageSize.value)
    if(result.ret == 200){
      newPeople.value = result.data.albums
    }
  } catch (error) {
    return Promise.reject(error)
  }
}

const getMyTymz = async () => {
  try {
    let result = await reqmytymz()
    if(result.code === 0){
      myTymz.value = result.data.limitedFreeAlbum.limitedTimeFreeAlbums
      timer.value = result.data.limitedFreeAlbum.remainingTime * 10
    }
  } catch (error) {
    return Promise.reject(error)
  }
}

const getReqmyTymz = async () => {
    try {
        let result = await reqmytymz()
        if(result.code === 0){
            hotTrack.value = result.data.hotTrack.hotTracks
        }
    } catch (error) {
      return Promise.reject(error)
    }
}

const goRank = () => {
  router.push('rank')
}

const goClassIfIcation = () => {
  router.push('classification')
}

const goListenList = () => {
  router.push('listenlist')
}

const goLogin = ($event:any) => {
  window.open('https://m.ximalaya.com/applink'); // 会下载客户端
}

</script>

<style scoped lang="less">
.home_content{
  overflow: hidden;
}
// 轮播图
.slideshow{
  width: 375.2px;
  // height: 162px;
}
.slideshow_img{
  width: 292.5px;
  height: 126px;
}
// 喜马拉雅横幅标语
.amid_banner{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 375.2px;
  height: 81.29px;
  margin-top: 18px;
  margin-bottom: 8px;
}
.banner_img{
  width: 375px;
  height: 80px;
}
// 排行榜相关
.tomatoes{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 375.2px;
  // height: 53.8px;
  font-size: 12px;
  z-index: 99;
}
.cate_box1{
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  width: 102.66px;
  height: 53.8px;
  text-align: center;
  line-height: 53.8px;
}
.cate_box2{
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  width: 102.66px;
  height: 53.8px;
  text-align: center;
  line-height: 53.8px;
}
.cate_box3{
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  width: 102.66px;
  height: 53.8px;
  text-align: center;
  line-height: 53.8px;
}
.tomatoes_img{
  width: 34px;
  height: 34px;
  line-height: 34px;
}
.tomatoes_text{
  width: 102.66px;
  height: 17px;
  line-height: 17px;
}
// 新人必听
.albunm_title{
  position: relative;
  width: 360.2px;
  height: 59px;
  line-height: 59px;
}
.albunm_text{
  width: 345px;
  height: 25px;
  font-size: 18px;
  color: #40404C;
  margin: 30px 0 17px 15px;
  font-weight: 900;
}
.albunm_text3{
  width: 345px;
  height: 25px;
  font-size: 18px;
  color: #40404C;
  margin: -20px 0 17px 15px;
  font-weight: 900;
}

// 限时免费
.countDown{
  position: absolute;
  left:100px;
  top:20px;
}
.swipe_margin{
  margin-right: 10px;
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #333;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: #f74040;
  }

// 今日热点
.hotToday_box{
  justify-content: center;
  align-items: center;
  width: 375.2px;
}
.track_container{
  width: 345.2px;
  height: 100px;
}

// 底部
#bgimg{
  background: url('../../assets/images/footer_image.png') no-repeat;
  z-index: 99;
}
.footer_content{
  width: 375px;
  height: 180px;
}

.footer_text p{
  display: block;
  width: 375px;
  height: 16px;
  color: #808080;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}

</style>